<template>
	<!-- 评论模块 -->
	<div Commentcontainer>
		<h1 class="dis">发表评论</h1>
		<hr />
		<textarea placeholder="请输入要评论的内容(最多120字)" maxlength="120" class="text" v-model="msg"></textarea>
		<mt-button type="primary" size="large" class="btn" @click="postComment">发表评论</mt-button>
		<div>
			<div v-for="(item,i) in comments" :key="item.id">
				<div class="l">第{{ i+ 1}}楼&nbsp;&nbsp; 用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time}}</div>
				<div class="c">{{item.content == 'undefined' ? '此用户很懒，没有评论':item.content}}</div>
			</div>
			
		</div>
		
		<mt-button type="danger" size="large" class="btn" @click="getMore" plain>加载更多</mt-button>
	</div>
	
</template>

<script>
	import { Toast } from 'mint-ui';
	export default{
		data() {
			return {
				index: 1,
				comments:[],
				msg:''
			}
		},
		created() {
			this.getComments()
		},
		methods:{
			getComments(){
				this.$http.get('http://www.liulongbin.top:3005/api/getcomments/'+this.id+'?pageindex='+this.index).
				then(function(data){
					if(data.body.status===0){
						// this.comments=data.body.message
						this.comments=this.comments.concat(data.body.message)
						
					}else{
						Toast('评论加载失败')
					}
				})
			},
			getMore(){
				this.index++
				this.getComments()
			},
			postComment(){
				if(this.msg.trim().length===0){
					return Toast('请输入评论')

				}
				
					this.$http.post('http://www.liulongbin.top:3005/api/postcomment/'+this.id,{content:this.msg.trim()}).then(function(data){
						// console.log(data.body)
						if(data.body.status===0){
							this.comments=[]
							this.index=1
							this.getComments()
							this.msg=''
						}else{
							Toast('评论失败')
						}
					})
				}
				
			
		},
		props:['id']
	}
	
</script>

<style scoped="scoped">
	.text{
		height: 100px;
		margin: 0;
		font-size: 13px;
	}
	.Commentcontainer{
		padding: 1px 4px;
	}
	.dis{
		font-size: 18px;
	}
	.btn{
		margin: 5px 0px;
	}
	.l{
		background-color: #CCCCCC;
		font-size: 12px;
		line-height: 30px;
		margin: 2px;
	}
	.c{
		font-size: 12px;
		line-height: 30px;
		margin: 2px;
		text-indent: 25px;
	}
</style>
